import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { BASE_URL } from '../../utils'
import NavHeader from '../../components/NavHeader'
import HouseItem from '../../components/HouseItem'
import NoHouse from '../../components/NoHouse'
import './index.sass'
export default class Rent extends Component {
  state = {
    // 出租房屋列表
    list: []
  }
  // 获取已发布房源的列表数据
  async getHouseList() {
    const res = await this.$API.get('/user/houses')

    const { status, body } = res
    if (status === 200) {
      this.setState({
        list: body
      })
    } else {
      const { history, location } = this.props
      history.replace('/login', {
        from: location
      })
    }
  }
  componentDidMount() {
    this.getHouseList()
  }
  renderRentList() {
    const { list } = this.state
    const { history } = this.props
    if (!list.length > 0) {
      return (
        <NoHouse>
          <Link to="/rent/add" style={{color:'#333'}}>
            您还没有房源，去发布房源吧~
          </Link>
        </NoHouse>
      )
    }
    return list.map(item => {
      return (
        <HouseItem
          key={item.houseCode}
          onClick={() => history.push(`/detail/${item.houseCode}`)}
          src={BASE_URL + item.houseImg}
          title={item.title}
          desc={item.desc}
          tags={item.tags}
          price={item.price}
        />
      )
    })

  }
  render() {
    return (
      <div style={{paddingBottom:'50px',overflow:'auto'}}>
        <NavHeader>房屋管理</NavHeader>
        <div className="publishButton">
          <Link to="/rent/add" style={{color:'#fff'}}>
            发布房源
          </Link>
        </div>
        {this.renderRentList()}
      </div>
    )
  }
}
